<template>
  <div class="app-container">
    <el-form
      ref="listFilterRef"
      :model="list.filter"
      inline
      class="list-filter"
    >
      <el-form-item prop="title">
        <el-input
          v-model="list.filter.title"
          placeholder="资讯名称"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item prop="areaCode">
        <RegionSelect
          placeholder="请输入所属地区"
          v-model="list.filter.areaCode"
          :props="{ checkStrictly: true }"
          :level="2"
        />
      </el-form-item>
      <el-form-item prop="status">
        <Status v-model="list.filter.status" />
      </el-form-item>
      <el-form-item prop="top">
        <KiSelect
          v-model="list.filter.top"
          :options="[
            { dataName: '已置顶', dataValue: 1 },
            { dataName: '未置顶', dataValue: 0 }
          ]"
          placeholder="是否置顶"
        />
      </el-form-item>
      <el-form-item>
        <el-button @click="reset">重置</el-button>
      </el-form-item>
    </el-form>

    <div class="table-operation">
      <AuthButton @click="c" name="新增" />
      <el-pagination
        :total="list.total"
        :currentPage.sync="list.filter.pageNo"
        :pageSize.sync="list.filter.pageSize"
      />
    </div>

    <el-table v-loading="list.loading" :data="list.data" v-bind="tableProp">
      <el-table-column label="资讯名称" prop="title" />
      <el-table-column label="发布模板">
        <template slot-scope="{ row }">
          <span>
            {{ row.template | $value2label(dict['dynamicTemplate']) }}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="所属地区">
        <template slot-scope="{ row }">
          <span>{{ row.areaNameList.join('、') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="图片">
        <template slot-scope="scope">
          <PicViewer :value="scope.row.imgUrl" tableCell />
        </template>
      </el-table-column>
      <el-table-column label="创建时间" align="center" prop="createTime" />
      <el-table-column label="来源" align="center" prop="source" />
      <el-table-column label="是否置顶" align="center" width="120">
        <template slot-scope="{ row }">
          <el-tag v-if="row.top == '1'" type="success">已置顶</el-tag>
          <el-tag v-if="row.top == '0'" type="warning">未置顶</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="启用状态" width="80" align="center">
        <template slot-scope="{ row: { id, status } }">
          <KiPopSwitch
            v-bind="popSwitchProps(status)"
            @change="updateStatus({ id, status: status ^ 1 })"
          />
        </template>
      </el-table-column>
      <el-table-column label="操作" class-name="small-padding">
        <template slot-scope="{ row }">
          <auth-button
            v-if="row.top"
            slot="reference"
            type="info"
            :elPopconfirmProps="elPopconfirmProps"
            @click="handleRowTop(0, row)"
            class="sticky-no"
            circle
            name="取消置顶"
          >
            <i class="el-icon-download"></i>
          </auth-button>
          <auth-button
            v-else
            slot="reference"
            type="info"
            :elPopconfirmProps="elPopconfirmProps1"
            @click="handleRowTop(1, row)"
            class="sticky-yes"
            circle
            name="确认置顶"
          >
            <i class="el-icon-upload2"></i>
          </auth-button>
          <auth-button @click="u({ id: row.id })" name="编辑" />
          <auth-button @click="d({ id: row.id })" name="删除" />
        </template>
      </el-table-column>
    </el-table>

    <KiFormDialog
      :show.sync="form.show"
      :title="formTitle"
      v-model="form.data"
      :submit="submitForm"
      :readonly="form.status === 'r'"
      ref="formRef"
      :loading="form.loading"
    >
      <template #el-form>
        <!-- 模板只在新增新闻时可选 -->
        <el-form-item label="发布模板" prop="template">
          <div
            v-if="form.status === 'c'"
            class="form-item-temp temp-add"
            @click="dynamicsTemp.show = true"
          >
            <span>
              {{ form.data.template | $value2label(dict['dynamicTemplate']) }}
            </span>
            <i class="el-icon-arrow-down"></i>
          </div>
          <div v-else class="form-item-temp">
            <span>
              {{ form.data.template | $value2label(dict['dynamicTemplate']) }}
            </span>
          </div>
        </el-form-item>
        <el-form-item label="发布地区" prop="areaCodeList" verify>
          <RegionSelect
            v-model="form.data.areaCodeList"
            :props="{ checkStrictly: true, multiple: true }"
            placeholder="请选择发布地区，可多选"
          />
        </el-form-item>
        <el-form-item label="资讯标题" prop="title" verify>
          <el-input
            v-model="form.data.title"
            placeholder="请输入资讯标题"
            maxlength="50"
            show-word-limit
          />
        </el-form-item>
        <el-form-item
          v-if="imgUrlCount != 0"
          label="资讯图片"
          prop="imgUrl"
          verify
        >
          <Imgpond
            v-if="formImgShow"
            v-model="form.data.imgUrl"
            :aspectRatio="imgFixedRatio"
            :count="imgUrlCount"
            valueType="array"
          />
        </el-form-item>
        <el-form-item label="资讯来源" prop="source" verify>
          <el-input
            v-model="form.data.source"
            placeholder="请输入资讯来源"
            maxlength="10"
            show-word-limit
          />
        </el-form-item>
        <el-form-item label="资讯内容" prop="content" verify>
          <MiniMCE
            v-model="form.data.content"
            :disabled="form.status === 'r'"
          />
        </el-form-item>
      </template>
    </KiFormDialog>

    <el-dialog
      title="请选择发布模板"
      :visible.sync="dynamicsTemp.show"
      :close-on-click-modal="false"
      v-show="dynamicsTemp.show"
      destroy-on-close
      custom-class="custom-dialog tem-dailog"
    >
      <div class="custom-form">
        <div
          class="custom-form-item"
          :class="dynamicsTemp.data == item.dataValue ? 'form-item-active' : ''"
          v-for="(item, index) in dynamicTemplate"
          :key="index"
          @click="dynamicsTemp.data = item.dataValue"
        >
          <div class="item-l">
            <div class="radios-name">{{ item.dataName }}</div>
            <img class="radios-temp" :src="getImageUrl(item.dataValue)" />
          </div>
          <div class="item-radios"></div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dynamicsTemp.show = false">关 闭</el-button>
        <el-button
          type="primary"
          @click="submitDynamics"
          :loading="dynamicsTemp.loading"
        >
          确 定
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import pageMixin from '@/utils/pageMixin'
import useAdmateAdapter from '@/utils/useAdmateAdapter'
import Expired from '@/components/Expired'

export default {
  mixins: [pageMixin],
  components: { Expired },
  setup: () =>
    useAdmateAdapter({
      urlPrefix: 'one-travel-api/dynamics',
      form: {
        data: {
          imgUrl: []
        }
      }
    }),
  data () {
    return {
      btnText: {
        confirmButtonText: '是',
        cancelButtonText: '否'
      },
      elPopconfirmProps: {
        title: '是否取消置顶？',
        ...this.btnText
      },
      elPopconfirmProps1: {
        title: '是否确认置顶？',
        ...this.btnText
      },
      dynamicTemplate: [],
      dynamicsTemp: {
        show: false,
        loading: false,
        data: ''
      },
      imgUrlCount: 1,
      imgFixedRatio: '1/1',
      formImgShow: true // 使用v-if强制刷新 Imgpond 组件
    }
  },
  watch: {
    'form.show' (newVal) {
      if (newVal) {
        // 默认为第一个模板
        let dataValue = this.dynamicTemplate[0].dataValue
        this.form.data.template = dataValue
        this.dynamicsTemp.data = dataValue
        this.compImgInfo(dataValue)
      }
    },
    'form.data': {
      deep: true,
      handler (n) {
        if (n.template) {
          this.compImgInfo(n.template)
        }
      }
    },
    'dynamicsTemp.show' (newVal) {
      if (newVal) {
        this.dynamicsTemp.data = this.form.data.template
      }
    },
    imgUrlCount () {
      if (this.form.status == 'c') {
        this.form.data.imgUrl = []
        this.formImgShow = false
        setTimeout(() => {
          this.formImgShow = true
        }, 50)
      }
    }
  },
  mounted () {
    this.dynamicTemplate = this.dict['dynamicTemplate']
  },
  methods: {
    getImageUrl (dataValue) {
      const path = './images/type' + dataValue + '.png'
      const modules = import.meta.glob('./images/*.png', { eager: true })
      return modules[path].default
    },
    handleRowTop (type, row) {
      this.$POST('/one-travel-api/dynamics/top', {
        id: row.id,
        status: type
      }).then(res => {
        if (res.errorCode == '00000') {
          this.$swal.success('修改成功')
          this.getList()
        } else {
          this.$swal.error(res.message)
        }
      })
    },
    openDynamicsTemp () {
      this.dynamicsTemp.show = this.form.status === 'c' ? true : false
    },
    submitDynamics () {
      let temType = this.dynamicsTemp.data
      this.form.data.template = temType
      this.compImgInfo(temType)
      this.dynamicsTemp.show = false
    },
    compImgInfo (temType) {
      let count = 1
      switch (temType) {
        case '6':
          count = 0
          break
        case '5':
          count = 3
          break
        case '4':
          count = 2
          break
        default:
          count = 1
          break
      }
      this.imgUrlCount = count
      this.dynamicTemplate.forEach(item => {
        if (item.dataValue == temType) {
          this.imgFixedRatio = item.remark
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.form-item-temp {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  font-size: 12px;
}

// 置顶按钮
:deep(.sticky-yes .el-button--info) {
  background-color: #1fd8b6;
  border-color: #1fd8b6;
}
:deep(.sticky-no .el-button--info) {
  background-color: #ffba00;
  border-color: #ffba00;
}

.temp-add {
  border-radius: 4px;
  border: 1px solid #dcdfe6;
  .holder {
    color: #c4c7cf;
  }
}

.tem-dailog {
  .custom-form {
    .custom-form-item {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 15px;
      background: #fff;
      .item-l {
        display: flex;
        align-items: center;
        .radios-name {
          width: 80px;
        }
        .radios-temp {
          margin-left: 20px;
          width: 400px;
        }
      }
      .item-radios {
        position: relative;
        width: 18px;
        height: 18px;
        margin-left: 100px;
        border-radius: 50%;
        border: 1px solid #c4c7cf;
        background: #fff;
      }
      &:hover {
        background: #f5f5f5;
      }
    }
    .form-item-active {
      .item-radios {
        border: 1px solid #13ce66;
        &::after {
          content: '';
          position: absolute;
          top: 3px;
          left: 3px;
          height: 10px;
          width: 10px;
          background: #13ce66;
          border-radius: 50%;
        }
      }
    }
  }
  .el- .el-radio {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: row-reverse;
    .radios-temp-img {
      width: 280px;
      height: 160px;
    }
  }
}
</style>
